import { PageContainer } from "@ant-design/pro-components";
import {
  Button,
  Modal,
  Input,
  Form,
  Tabs,
  Table,
  Select,
  Checkbox,
  Space,
  message,
  InputNumber,
} from "antd";
import { useState, forwardRef, useImperativeHandle, useRef } from "react";
import styles from "./styles.less";
const { TextArea } = Input;

export default forwardRef((props, ref) => {
  const [open, setOpen] = useState(false);
  const tableRef = useRef(null);
  const [form] = Form.useForm();

  const submitForm = async () => {
    await form.validateFields();
    console.log(form.getFieldsValue());
    setOpen(false);
    message.success("操作成功");
  };

  useImperativeHandle(ref, () => ({
    setOpen,
  }));

  return (
    <Modal
      open={open}
      title="复制题目"
      forceRender
      width={800}
      onCancel={() => setOpen(!open)}
      footer={
        <Space>
          <Button onClick={() => setOpen(false)}>取消</Button>
          <Button onClick={submitForm} type="primary">
            确定
          </Button>
        </Space>
      }
    >
      <Form form={form} layout="vertical">
        <Form.Item name="id" hidden>
          <Input />
        </Form.Item>

        <Form.Item
          label="请选择要复制过去的目标试卷"
          name="请选择要复制过去的目标试卷"
          rules={[{ required: true }]}
        >
          <Checkbox.Group>
            <Checkbox value={1}>试卷1</Checkbox>
            <Checkbox value={2}>试卷2</Checkbox>
            <Checkbox value={3}>试卷3</Checkbox>
            <Checkbox value={4}>试卷4</Checkbox>
            <Checkbox value={5}>试卷5</Checkbox>
          </Checkbox.Group>
        </Form.Item>
      </Form>
    </Modal>
  );
});

// export default Dom
